Urbanbike

Index |
ou détaillée | Fil RSS | ATOM

CSSEdit 2.5

L'outil pour pondre des CSS

dans outils

On s’en doutait un peu après lecture de quelques informations sur le blog du développeur mais c’est désormais fait, la version de CSSEdit 2.5 (gratuite pour les utilisateurs de la version 2.xx) est disponible au téléchargement…
Suite dans quelques instants…

image

En fait, il y a plein de petits détails pratiques qui ont été ajoutés… De l’ergonomie essentiellement pour résumer.
Un exemple, l’écran de prévisualisation du rendu de la CSS dans le site que vous souhaitez ajuster… Hop, on est passé aux onglets, ce qui est pratique et libère l’espace de gauche de la fenêtre. La barre d’information de la balise sélectionnée apparaît désormais juste en dessous au lieu d’être en pied comme sur le 2.xx.

image

Mais le plus intéressant pour ceux qui bâtissent des CSS à longueur de temps est le Selector Builder qui permet plus simplement de rattacher à un style existant des options comme un span ou autre. L’idée est de mieux relier le tout en formalisant l’écriture des noms dans la CSS (notamment au niveau de la filiation). Ce n’est pas idiot car parfois on invente des options de style qui — sur le moment — sont évidentes et, trois mois après, il faut un certain temps pour rassembler tous les fils…! Pour le reste lire le précédent billet d’urbanbike à ce sujet.

le 23/04/2007 à 18:50 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #

CSS par l’exemple

Deux nouvelles éditions en français de livres sur la conception de sites avec des CSS

dans lire | outils

Hasard de l'édition, j'ai reçu, à 24 heures près, deux ouvrages traitant des CSS. Ils n'ont rien à voir avec le livre magistral d'Eric Meyer (CSS, la référence), ouvrage auquel d'ailleurs les auteurs se réfèrent l'un comme l'autre, mais sont plus à consulter comme des ouvrages qui vont traiter, au cas par cas, de problèmes que les développeurs peuvent rencontrer lors de la mise au point de sites professionnels… Bref, deux bouquins à conserver à portée de main dès que vous rencontre des problèmes d’affichage sous certains navigateurs par exemple…

Le premier, CSS par l'exemple — que vous pouvez acquérir désormais sur le site de l'éditeur O'Reilly — est une traduction d'un ouvrage américain, CSS Cookbook, écrit par le grand Christopher Schmitt (hé, deux mètres de haut…)… Cette seconde édition fait le tour de toutes les questions que l'on peut se poser lors de la conception d'un site et en souhaitant faire des choses un peu particulières sans se planter. D'ailleurs je signale que les exemples du livre sont téléchargeables ici.
Bref, c'est bourré de réponses à des questions qu'il nous arrive régulièrement de nous poser et c'est truffé de réponses intéressantes et pratiques à mettre en œuvre avec les possibles pièges à éviter. Du coup, ces bouts d'explications pour des cas bien concrets permettent de mieux comprendre les CSS en action. Plus de 500 pages avec une mise en pages qui utilise des polices de chez Typofonderie et de chez Lucas Fontes et un index impeccable.

Plus court (310 pages) et traduit de l'alsacien, cette seconde édition de CSS 2, pratique du design web par Raphaël Goetter. Un poil moins exhaustif que le livre précédent, c'est — dans un autre style — tout aussi technique sur le fond avec de bonnes touches d'humour liées à une pratique quotidienne et une participation régulière à un forum. J'ai particulièrement apprécié l'encadré sur les maladies exotiques des CSS, de la devite chronique à la classite aiguë en passant par la strictite aveugle qui touche pas mal de sites (page 54). Plus ancré dans le concret avec un exemple de site développé tout au long de l'ouvrage, c'est une autre manière de présenter — ou de passer en revue — tous les problèmes et d'indiquer les petits comme les grands trucs essentiels qui rendent un site efficace. Le résultat est visible ici-même avec tous les exemples, chapitre par chapitre…

Bref, difficile de départager (et dans quel but…) ces deux livres qui ont la même ambition, vous permettre de commettre moins de bévues si vous vous lancez dans des projets professionnels d'importance en faisant appel aux CSS… Bref, deux approches qui vous rendront un inestimable service dans tous les cas.

CSS par l'exemple (Seconde édition | mars 2007)
Christopher Schmitt (traduction d'Hervé Soulard)
O'Reilly
9782841774326 | 45 €

Ou CSS Cookbook (en anglais)

CSS 2 Pratique du design web (Seconde édition | mars 2007)
Raphaël Goetter
Eyrolles
9782212119763 | 32 €

image

note : Raphaël est également l'auteur des mémentos sur XHTML et sur les CSS.

le 20/04/2007 à 08:30 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #

Motifs vectoriels avec Adobe Illustrator

Quelques bases pour se lancer

dans outils

L’usage des motifs est vieux comme le monde. Il suffit de porter son regard sur certaines mosaïques romaines comme sur les motifs des tapis tissés en Amérique centrale ou au Moyen-Orient pour se convaincre que c’est bien un des trous premiers arts “premiers” ! Que toutes les civilisations ont la géométrie en commun, que tous les hommes — quand ils ne s’entre-tuaient pas — pouvaient chercher à combiner des formes élémentaires pour les décliner en frises…!

Avec des machines de plus en plus puissantes en terme de processeur et des outils vectoriels comme Adobe illustrator, fabriquer des motifs n’est plus une tâche trop compliqué. Enfin, en théorie…!

La réussite d’un motif ne peut fonctionner que si trois éléments sont réunis…
• Avoir au minimum une idée assez précise de ce que l’on souhaite réaliser (un premier croquis au crayon est nécessaire pour juger, soi-même, de la pertinence du projet graphique)…
• Ensuite, être très rigoureux dans ses mesures et cela dès le démarrage à l’écran.
• Enfin, se souvenir que fabriquer des motifs est une activité hautement chronophage et qu’il existe (heureusement…!) des sites de vente en ligne qui vous épargneront bien de la peine et du temps. Pour ma part, j’utilise cette dernière solution, quitte à remanier ensuite à mon idée les dessins acquis online.

Le propos ici n’est pas de vous montre comment réaliser un superbe “motif de la mort qui tue” (1000 graphistes, 1000 appréciations différentes…!) mais de rappeler quelques notions basiques, conditions de réussite…!

Se placer dans les bonnes conditions de travail
Bref, ouvrez Illustrator et commencez par changer temporairement vos préférences d’application. Que vous soyez en RVB ou CMJN n’a pas d’importance, j’imagine que tous les lecteurs ont d’ors et déjà fixé les bons profils ICC, etc.
Non, ce qui est important pour éviter de fins décalages, c’est d’opter pour des points… Si, si, de travailler en points et non en millimètres…

Ensuite de créer des carrés qui serviront de guides pour les tracés futurs.

image

J’attire immédiatement votre attention sur un point de détail qui a son importance… Si vous placez votre carré n’importe où sur la page d’illustrator, les cordonnées x;y risquent d’être suivies de décimales…

Arrondissez les coordonnées… Ah, surprise, certains d’entre vous verront alors que le carré de 100 par 100 est devenu soudainement un 100 par 99,98 pts…!
Ces 0,02 points peuvent s’avérer parfois pénalisants lors de la répétition…
En effet, quand vous allez utiliser ce motif sous InDesign et que vous allez générez un fichier .ps qui sera ensuite distillé, vous risquez de découvrir sur votre .pdf ouvert sous acrobat des lignes horizontales ou verticales disgracieuses à l’endroit des répétitions du motif…

J’imagine que tout le monde sait utiliser l’outil de déplacement en mode copie — puis avec l’option répétition de la dernière action — pour créer une grille parfaite…

image

Une fois la grille réalisée, il suffit d’aller dans Affichage/Repères/Créer les repères…

Grâce à cette grille de base, vous allez pouvoir tracer dessus, en utilisant d’ailleurs une astuce…
En effet, pour placer précisément les éléments dans illustrator, un petit coup de Commande U (repères commentés) qui vous signalera quand vous serez bien placé par rapport à la forme en dessous. Ce sont les collimateurs d’Illustrator en quelque sorte…! Bon, ne pas hésitez à vérifiez à un niveau de zoom important et en regardant régulièrement les valeurs affichées dans la palette dans les coordonnées (pour limiter l’arrivée de décimales dans les valeurs…)

image

Tout ceci pour dessiner une forme élémentaire. Ici, une pelta (la forme du bouclier romain).

image

En conservant la même grille et en réduisant la forme créée à 50 %, vous pouvez commencer une combinatoire classique… Comme cette disposition.

image

Au risque de me répéter, vérifiiez systématiquement les jonctions de formes…

image

Mais pour créer le motif, il faut le délimiter avec un carré transparent (pas de contour et pas de couleur de fond) qui va servir de section de répétition. En effet, un motif, c’est une brique élémentaire répétée à l’infini.
Dans le cas décrit, c’est un simple carré qui couvre nos 4 par 4 rectangles (je l’ai matérialisé en vert clair…). Ce carré soit être impérativement en arrière-plan de tous les éléments qui construisent le motif.

image

Bon, le carré de section est donc transparent, on, le sélectionne lui et les figures du motif… et cliqué/glissé dans la palette des motifs…! Pour vérifier ce que cela donne un rectangle à côté auquel nous attribuons le motif fraîchement réalisé…

image

Bref, vous avez compris… Ensuite en conservant ce carrée de sélection transparent et en déplaçant les figures, en jouant sur des translations, on peut décliner ainsi les éléments de base…

image

Vous pouvez essayer d’autres combinaisons, sur une grille de trois carrés par exemple…

image

Je vous engage à mémoriser tous vos motifs au fur et à mesure de leur création en les glissant dans la palette idoine (il sera toujours temps après coup de trier pour ne conserver que les motifs efficaces)…

image

Et ainsi de suite. En partant de cette dernière option, rien ne vous empêche de finasser pour construire un motif plus sophistiqué en utilisant d’autres opérations élémentaires d’Illustrator. Celui présenté est améliorable et n’est ici que pour clore cette démonstration…

image

Ce qui m’intéressait dans ce bref billet, c’était de vous inciter à réfléchir à l’emploi des motifs qui reviennent en force dans le paysage graphique. À vous de jouer en n’oubliant pas que cela va consommer beaucoup — trop — de temps (…parfois au détriment des missions à finaliser). Ensuite qu’il est très facile de bien démarrer pour finir par surcharger outrageusement le motif au point qu’il en devient franchement inutilisable… Qu’un motif raffiné n’est pas forcément compliqué… Qu’il y a des gens très doués et d’autres moins…!

Pour ma part, je plébiscite OnePattern qui a le mérite — entre autres — d’offrir un excellent ratio qualité/prix…

le 19/04/2007 à 08:30 | .(JavaScript doit être activé pour visualiser cette adresse email) à JChris d'Urbanbike | #